define(['durandal/app', 'durandal/composition', 'knockout', 'jquery'],
    function (app, composition, ko, $) {
        function ViewModel() {
            var $dom = null;
            var self = this;

            composition.addBindingHandler('Example02', {
                init: function (dom) {
                    $dom = $(dom);

                    init();
                }
            });

            function init() {
                initImages();
                initEvents();
            }

            function initImages() {
                self._minBoxImgs = getImages('min');
                self._maxBoxImgs = getImages('max');
                fllBox($dom.find(".minbox"), self._minBoxImgs);
                fllBox($dom.find(".maxbox"), self._maxBoxImgs);
            }

            function getImages(type) {
                var images = [];
                for (var i = 0; i < 6; i++) {
                    var item = {};
                    if (type === 'min') {
                        item.background = 'url(app/album/example02/images/0' + (i + 1) + '.png)';
                        item.transform = getRotate(i) + ' translateZ(0.5rem)';
                    } else {
                        item.background = 'url(app/album/example02/images/' + (i + 1) + '.png)';
                        item.transform = getRotate(i) + ' translateZ(1rem)';
                    }
                    images.push(item);
                }
                return images;
            }

            function getRotate(index) {
                var transform = null;
                switch (index) {
                    case 0:
                        transform = 'rotateX(0deg)';
                        break;
                    case 1:
                        transform = 'rotateX(180deg)';
                        break;
                    case 2:
                        transform = 'rotateX(-90deg)';
                        break;
                    case 3:
                        transform = 'rotateX(90deg)';
                        break;
                    case 4:
                        transform = 'rotateY(-90deg)';
                        break;
                    case 5:
                        transform = 'rotateY(90deg)';
                        break;
                }
                return transform;
            }

            function fllBox(box, list) {
                box.empty();
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    box.append('<li style="background: ' + item.background + '; -webkit-transform: ' + item.transform + '"></li>');
                }
            }

            function initEvents() {
                // jQuery.fn.hover = function( fnOver, fnOut ) {
                //     return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
                // };
                $dom.find('.box').hover(
                    function () {
                        pauseAnimation();
                        self._maxBoxImgs.forEach(function (item, index) {
                            item.transform = getRotate(index) + ' translateZ(3rem)';
                        });
                        fllBox($dom.find(".maxbox"), self._maxBoxImgs);
                        runAnimation();
                    },
                    function () {
                        pauseAnimation();
                        self._maxBoxImgs.forEach(function (item, index) {
                            item.transform = getRotate(index) + ' translateZ(1rem)';
                        });
                        fllBox($dom.find(".maxbox"), self._maxBoxImgs);
                        runAnimation();
                    }
                );
            }

            function pauseAnimation() {
                $dom.find(".box").css({animationPlayState: 'paused'});
            }

            function runAnimation() {
                $dom.find(".box").css({animationPlayState: 'running'});
            }
        }

        return ViewModel;
    });
